<template>
  <div class="h-full">
    <n-card class="h-full shadow-sm rounded-16px"><vxe-grid v-bind="realWipGridOptions"></vxe-grid></n-card>
    <n-modal v-model:show="showModal">
      <n-card style="width: 1200px" title="LOT列表" :bordered="false" size="huge" role="dialog" aria-modal="true">
        <vxe-grid v-bind="lotGridOptions"></vxe-grid>
      </n-card>
    </n-modal>
  </div>
</template>
<script setup lang="tsx">
import { onMounted, reactive, ref } from 'vue';
import type { VxeGridProps } from 'vxe-table';
import { fetchLotByParentLot, fetchRealWip } from '@/service';

const showModal = ref(false);
const viewParentLot = ref('');
const sumNum = (list: any[], field: string) => {
  let count = 0;
  list.forEach(item => {
    count += Number(item[field]);
  });
  return count;
};

// const realWipGridColumns = reactive<VxeGridPropTypes.Columns[]>([]);
const realWipGridOptions = reactive<VxeGridProps>({
  border: true,
  showFooter: true,
  height: 660,
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'PRODUCTSPECNAME',
      title: '客户料号',
      width: 200,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    { field: 'DESCRIPTION', title: '料号描述', width: 100 },
    {
      field: 'PRODUCTREQUESTNAME',
      title: '生产订单',
      width: 140,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PARENTLOTNAME',
      title: '内部订单',
      width: 150,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'R01',
      title: 'R01|上片',
      width: 80,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R01 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R01}
              </span>
            ) : (
              row.R01
            )
          ];
        }
      }
    },
    {
      field: 'R02',
      title: 'R02|清洗',
      width: 80,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R02 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R02}
              </span>
            ) : (
              row.R02
            )
          ];
        }
      }
    },
    {
      field: 'R03',
      title: 'R03|镀膜',
      width: 80,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R03 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R03}
              </span>
            ) : (
              row.R03
            )
          ];
        }
      }
    },
    {
      field: 'R04',
      title: 'R04|点胶',
      width: 80,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R04 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R04}
              </span>
            ) : (
              row.R04
            )
          ];
        }
      }
    },
    {
      field: 'R05',
      title: 'R05|烤胶',
      width: 80,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R05 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R05}
              </span>
            ) : (
              row.R05
            )
          ];
        }
      }
    },
    {
      field: 'R06',
      title: 'R06|退火',
      width: 80,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R06 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R06}
              </span>
            ) : (
              row.R06
            )
          ];
        }
      }
    },
    {
      field: 'R07',
      title: 'R07|微调',
      width: 80,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R07 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R07}
              </span>
            ) : (
              row.R07
            )
          ];
        }
      }
    },
    {
      field: 'R08',
      title: 'R08|封焊',
      width: 80,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R08 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R08}
              </span>
            ) : (
              row.R08
            )
          ];
        }
      }
    },
    {
      field: 'R11',
      title: 'R11|老化1',
      width: 100,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R11 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R11}
              </span>
            ) : (
              row.R11
            )
          ];
        }
      }
    },
    {
      field: 'R12',
      title: 'R12|老化2',
      width: 100,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R12 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R12}
              </span>
            ) : (
              row.R12
            )
          ];
        }
      }
    },
    {
      field: 'R13',
      title: 'R13|回流焊',
      width: 100,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R13 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R13}
              </span>
            ) : (
              row.R13
            )
          ];
        }
      }
    },
    {
      field: 'R14',
      title: 'R14|测试1',
      width: 100,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R14 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R14}
              </span>
            ) : (
              row.R14
            )
          ];
        }
      }
    },
    {
      field: 'R20',
      title: 'R20|测试2',
      width: 100,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R20 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R20}
              </span>
            ) : (
              row.R20
            )
          ];
        }
      }
    },
    {
      field: 'R99',
      title: 'R99|编带入库',
      width: 120,
      slots: {
        // 使用 JSX 渲染
        default: ({ row }) => {
          return [
            row.R99 !== 0 ? (
              // eslint-disable-next-line @typescript-eslint/no-use-before-define
              <span style="color: blue" onClick={() => showDetailEvent(row)}>
                {row.R99}
              </span>
            ) : (
              row.R99
            )
          ];
        }
      }
    }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true
    // zoom: true
  },
  data: [],
  mergeCells: [],
  footerMethod({ columns, data }) {
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return 'Σ总计';
        }
        if (columnIndex > 3) {
          return sumNum(data, column.property);
        }
        return '';
      })
    ];
  },
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const lotGridOptions = reactive<VxeGridProps>({
  border: true,
  showFooter: true,
  height: 660,
  size: 'mini',
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'LOTNAME',
      title: 'LOT编号',
      width: 200,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    { field: 'PROCESSOPERATIONNAME', title: '站点', width: 100 },
    { field: 'PRODUCTQUANTITY', title: '数量', width: 140 },
    { field: 'PARENTLOTNAME', title: '内部订单', width: 150 },
    { field: 'CARRIERNAME', title: '载具', width: 120 },
    { field: 'AREANAME', title: '车间', width: 120 }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  footerMethod({ columns, data }) {
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return 'Σ总计';
        }
        if (columnIndex === 2) {
          return sumNum(data, column.property);
        }
        return '';
      })
    ];
  },
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getRealTimeWip = async () => {
  const result = await fetchRealWip();
  if (result.data) {
    realWipGridOptions.data = result.data;
  }
};

const getLotByParentLot = async () => {
  const result = await fetchLotByParentLot(viewParentLot.value);
  if (result.data) {
    lotGridOptions.data = result.data;
  }
};

const showDetailEvent = (row: any) => {
  showModal.value = true;
  viewParentLot.value = row.PARENTLOTNAME;
  getLotByParentLot();
};

onMounted(async () => {
  await getRealTimeWip();
});
</script>
